import React from 'react';
import './Top.scss'
import { Button, Popover, Input, Modal } from 'antd';
import {
    MinusOutlined,
    CloseOutlined,
    SearchOutlined,
    SyncOutlined,
    UserOutlined,
    LeftOutlined,
    RightOutlined,
} from '@ant-design/icons';

import { DefaultSearch, HotSearch } from "../../api/top/top";
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import QrLogin from "../../components/QrLogin/QrLogin";
import emitter from '../../event';


const mapStateToProps = (state) => {
    return {
        state,
    };
}



class Top extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            seachValue: '',
            hotList: [],
            loginmodel: false,
        }

        this.Min = this.Min.bind(this);
        this.Close = this.Close.bind(this);
        this.Focus = this.Focus.bind(this);
        this.SearchInput = this.SearchInput.bind(this);
        this.SearchMusic = this.SearchMusic.bind(this);
        this.islogin = this.islogin.bind(this);
        this.ShowLoginModel = this.ShowLoginModel.bind(this);
        this.CloseModal = this.CloseModal.bind(this);
        this.goHistory = this.goHistory.bind(this);
        this.goNext = this.goNext.bind(this);
    }

    componentDidMount() {
        this.GetDefault()
    }


    SearchInput(e){
        this.setState({
            seachValue: e.target.value
        })
    }

    SearchMusic(){
        this.props.history.push('/Search/'+ this.state.seachValue);
    }

    GetDefault(){
        DefaultSearch().then(res => {
            const { code, data } = res;
            if(code == 200){
                this.setState({
                    seachValue: data.realkeyword
                })

            }else {

            }
        }).catch(() => {

        })
    }

    Min(){
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.send('min')
    }

    Close(){
        const { ipcRenderer } = window.require("electron");
        ipcRenderer.send('Close')
    }

    Focus(){
        if(this.state.hotList.length == 0){
            HotSearch().then(res => {
                const { code, data } = res;
                if(code == 200){
                    this.setState({
                        hotList: data
                    });
                }else {

                }
            }).catch(() => {

            })
        }

    }

    Refresh(){
        location.reload();
    }

    islogin(){
        const { cookies, userInfo } = this.props.state;
        if(cookies){
            // 说明登录
        }else {
            // 未登录
            return <span>未登录</span>
        }
    }

    ShowLoginModel(){
        const { cookies, userInfo } = this.props.state;
        if(cookies){
            // 说明登录
        }else {
            // 未登录
            this.setState({
                loginmodel: true,
            })
        }
    }

    CloseModal(){
        this.setState({
            loginmodel: false,
        })
    }

    CloseLogin(){
        this.CloseModal();
    }

    goHistory(){
        this.props.history.go(-1);
    }

    goNext(){
        this.props.history.go(1);
    }

    CloseScreenLyrics(){
        // 关闭底部歌词弹窗

        emitter.emit('CloseScreenLyrics');
    }


    GetIsScreen(){
        const { isScreen } = this.props;
        if(isScreen){
            return <div className="Left-icon">
                <Button className="refreshButton Able_close" shape="circle" onClick={this.CloseScreenLyrics} icon={<i className="iconfont icon-xia"></i>} />
                <span className="title transpant">网易云音乐</span>
            </div>
        }else {
            return <div className="Left-icon">
                <i className="iconfont icon-wangyiyunyinle Able_close" />
                <span className="title">网易云音乐</span>
            </div>
        }
    }

    ShowCenter(content){
        const { isScreen, isNoTop } = this.props;
        const { historyActiveItem, Audiolyrics } = this.props.state;
        if(isScreen){
            if(isNoTop){
                return <div className="Center-Top Screen_CenterTop fade-in-bottom">
                    <span className="name">{historyActiveItem.name}</span>
                    <span className="lyrics">{Audiolyrics}</span>
                </div>
            }else {
                return <div className="Center-Top">
                    <Button className="refreshButton" shape="circle" onClick={this.goHistory} icon={<LeftOutlined />}></Button>
                    <Button className="refreshButton" shape="circle" onClick={this.goNext} icon={<RightOutlined />}></Button>
                    <Button className="refreshButton" shape="circle" onClick={this.Refresh} icon={<SyncOutlined/>}></Button>
                    <Popover overlayClassName="Seach-Popover" placement="bottomLeft" content={content} trigger="click" title="">
                        <Input value={this.state.seachValue} onPressEnter={this.SearchMusic} onInput={this.SearchInput} onFocus={this.Focus} className="Seach-Input" placeholder="搜索" prefix={<SearchOutlined />} />
                    </Popover>
                </div>
            }
        }else {
            return <div className="Center-Top">
                <Button className="refreshButton" shape="circle" onClick={this.goHistory} icon={<LeftOutlined />}></Button>
                <Button className="refreshButton" shape="circle" onClick={this.goNext} icon={<RightOutlined />}></Button>
                <Button className="refreshButton" shape="circle" onClick={this.Refresh} icon={<SyncOutlined/>}></Button>
                <Popover overlayClassName="Seach-Popover" placement="bottomLeft" content={content} trigger="click" title="">
                    <Input value={this.state.seachValue} onPressEnter={this.SearchMusic} onInput={this.SearchInput} onFocus={this.Focus} className="Seach-Input" placeholder="搜索" prefix={<SearchOutlined />} />
                </Popover>
            </div>
        }
    }

    render() {
        const { hotList } = this.state;

        const tuijianList = [];
        if(hotList){
            hotList.map((r,index) => {
                tuijianList.push(
                    <div key={index} className="HotItem">
                        <span className={['Item-Index',index <= 2 ? 'HotThree': ''].join(' ')}>{index+1}</span>
                        <div className="Item-Info">
                            <div className="Info-Top">
                                <span>{r.searchWord}</span>
                                {r.iconUrl ? <img src={r.iconUrl} alt=""/> : ''}
                                <span className="hotScore">{r.score}</span>
                            </div>
                            <div className="Info-content">
                                <span>{r.content}</span>
                            </div>
                        </div>
                    </div>
                )
            })
        }
        const content = <div className="ForYou">
            <div className="ForYou-titlle">
                热搜榜
            </div>
            {tuijianList}
        </div>
        return(
            <div className="AllTop">
                {this.GetIsScreen()}
                {this.ShowCenter(content)}
                <div className="Right-icon">
                    <Button onClick={this.ShowLoginModel} className="Login" type="text" icon={ <UserOutlined /> }>{ this.islogin() }</Button>
                    <Button onClick={this.Min} className="miss" shape="circle" icon={ <MinusOutlined /> } ></Button>
                    <Button onClick={this.Close} className="Close" shape="circle" icon={ <CloseOutlined /> } ></Button>
                </div>
                <Modal
                    centered
                    visible={this.state.loginmodel}
                    keyboard={false}
                    width={350}
                    footer={[]}
                    onCancel={this.CloseModal}
                    className="LoginModal"
                    destroyOnClose={true}
                >
                    <QrLogin content={this.CloseLogin.bind(this)} />
                </Modal>
            </div>
        )
    }
}

export default connect(mapStateToProps)(withRouter(Top))